'use strict';

/**
 * 商品详情
 */
import React, { PropTypes, Component } from 'react';

import YmtApi from 'YmtApi';

import { statusMap } from '../constants/statusMap';

import classNames from '../utils/classNames';

class ProductDetail extends Component {
	constructor(props) {
	    super(props);
	    this.state = {
	    	show:false,
	    	hide:1
	    }
	}
	/**
	 * 打开团详情
	 * @param  {string} topicId 
	 * @param  {string} title   
	 */
	openDetail(params,title = '砍价团-详情'){
		//add  refreshFlag=1
		// see : http://wiki.ymatou.cn:8090/pages/viewpage.action?pageId=16712089
		YmtApi.open({
			url:YmtApi.utils.addParam('/detail.html?refreshFlag=1',params),
			title:title,
			backFlag: 1,
			isNew:true
		})
	}
	render() {

		const { info = {} , isDetail = false,isMyself=false } = this.props;

		if(info.Status === null || info.Status === undefined){
			return null;
		}

		const NUMBER = ['零','一','二','三','四','五','六','七','八','九','十']
		//info.Status = 16;

		const getStatusClass = (_status)=>{
			let cls = ' group-status';
			if(_status === 5 
				|| _status === 6
				|| _status === 7){
				cls += ' group-status_warning'
			}else if(_status === 1 
				|| _status === 2 
				|| _status === 3
				|| (_status === 10 && isMyself)
				|| _status  === 11
				|| _status  === 12
				|| _status  === 16){
				cls += ' group-status_fail'
			}else if( _status === 8 || _status === 9){
				cls += ' group-status_success'
			}else{
				return '';
			}
			return cls;
		}

		return ( 
			<div className={ classNames('pro-detail border-bottom',getStatusClass(info.Status),{'shrink':statusMap[info.Status].length>3} ) }
				 onClick = {()=>{
				 	//判断是详情页 增加跳转详情的事件
				 	if(isDetail){
				 		return;
				 	}
					this.openDetail({
						topicId:info.TopicId,
						tuanId:info.TuanId,
						groupCode:info.GroupCode || undefined,
						isHistory:+isMyself //是否是历史记录
					});
				}}
				data-status-text={statusMap[info.Status]}>
				<div className="info">
					<div className="country">
						<span className="flag" style={{ backgroundImage:`url(${info.SellerFlag})` }}>
						</span>{info.SellerCountryName}
					</div>
					<h3 className="name">{ info.ProductName || info.Name }</h3>
					<div className="condition">{NUMBER[info.GroupMemberCount]}人成团价</div>
					<div className="price">
						<div className="pull-left">
							&yen;<strong>{info.Sale4Price}</strong>
						</div>
						<div className="pull-left market-price">
							市场价
							<div>
								<del>&yen;{info.MarketPrice}</del>
							</div>
						</div>
					</div>
					<div className="total">
						{info.Status!==1?`已成团${info.SuccessGroupCount}个`:`${(info.BeginTime||'')
						.replace(/\d{4}-/,'')
						.replace('-','月')
						.replace(' ','日 ')
						.replace(/:\d{2}$/,'')} 开始`}
					</div>
				</div>
				<div className="pic" style={{backgroundImage:`url(${info.ProductPicUrl})`}}></div>
			</div>
		)
	}
	onShow(){
		this.setState({
			show:true
		})
	}
	onHide(){
		this.setState({
			show:false
		})
	}
}

export default ProductDetail